<template>
	<view v-if="detail.isOccupy == 1">
		<u-popup :show="show" @close="close" round='32' closeable>
			<view class='explainPopup'>
				<!-- <view class="error"></view> -->
				<view class="top-g"></view>
				<view class="head">
					<view class="title flex-row-start">
						<text class="title-s"></text>
						超时占位费说明
					</view>
				</view>
				<view class="desc">充电结束后请于{{detail.occupyCostModel.freeDuration}}分钟内驶离充电车位，否则将收取占位费用，单次封顶{{detail.occupyCostModel.limitAmount | regFenToYuan}}元。</view>


				<view class="charging-times flex-row-start" v-if="detail.occupyCostModel.ruleType == 1">
					<view class="tip flex-row-center">当前收费时段</view>
					<view class="times-left">00:00-24:00</view>
					<scroll-view scroll-y :show-scrollbar="true" class="times-right">
						<view v-if="detail.occupyCostModel.occupyPhraseRules.every(item=>item.price == 0)">不收费</view>
						<view v-else>
							<view class="item" v-for="(item,index) in detail.occupyCostModel.occupyPhraseRules" :key="index">
								<view v-if="index == 0">
									{{item.etime}}分钟以内，
									<text v-if="item.price">{{item.price | regFenToYuan}}元/分钟；</text>
									<text v-else>不收费；</text>
								</view>
								<view v-else-if="index == detail.occupyCostModel.occupyPhraseRules.length-1">
									超出{{item.stime}}分钟部分，
									<text v-if="item.price">{{item.price | regFenToYuan}}元/分钟；</text>
									<text v-else>不收费；</text>
								</view>
								<view v-else>
									{{item.stime}}~{{item.etime}}分钟，
									<text v-if="item.price">{{item.price | regFenToYuan}}元/分钟；</text>
									<text v-else>不收费；</text>
								</view>
							</view>
						</view>
						
					</scroll-view>
				</view>

				<view class="charging-times-list" v-else>
					<view class="list-item flex-row-between"
						:class="{on:detail.occupyCurrentRule.id == item.id}"
						v-for="(item,index) in detail.occupyCostModel.occupyPhraseRules">
						<view class="tip flex-row-center">当前收费时段</view>
						<view class="item-left">{{changeHourMinutestr(item.stime)}}~{{changeHourMinutestr(item.etime)}}</view>
						<view class="item-right">
							<text v-if="item.price">{{item.price | regFenToYuan}}元/分钟</text>
							<text v-else>不收费</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<view class="placeholdExpense">
			<view class="head flex-row-between">
				<view class="title">超时占位费用说明</view>
				<view class="toDetail flex-row-start" @tap="showPopup">
					费用详情
					<text class="arrows"></text>
				</view>
			</view>

			<template v-if="detail.occupyCostModel.ruleType == 1">
				<view class="desc">
					<text class="item" v-if="detail.occupyCostModel.occupyPhraseRules.every(item=>item.price == 0)">不收费</text>
					<template v-else>
						<text class="item" v-for="(item,index) in detail.occupyCostModel.occupyPhraseRules" :key="index">
						<text v-if="index == 0">
							{{item.etime}}分钟以内，
							<text v-if="item.price">{{item.price | regFenToYuan}}元/分钟；</text>
							<text v-else>不收费；</text>
						</text>
						<text v-else-if="index == detail.occupyCostModel.occupyPhraseRules.length-1">
							超出{{item.stime}}分钟部分，
							<text v-if="item.price">{{item.price | regFenToYuan}}元/分钟；</text>
							<text v-else>不收费；</text>
						</text>
						<text v-else>
							{{item.stime}}~{{item.etime}}分钟，
							<text v-if="item.price">{{item.price | regFenToYuan}}元/分钟；</text>
							<text v-else>不收费；</text>
						</text>
					</text>

					</template>

					
					
				</view>
				<view class="foot flex-row-between">
					<view class="foot-title">当前收费时段</view>
					<view class="foot-desc">00:00-24:00</view>
				</view>
			</template>
			<template v-else>
				<view class="desc">
					<!-- <text class="item" v-if="detail.occupyCostModel.occupyPhraseRules.every(item=>item.price == 0)">不收费</text> -->
					<text class="item">
						<!-- <text>{{changeHourMinutestr(detail.occupyCurrentRule.stime)}}~{{changeHourMinutestr(detail.occupyCurrentRule.etime)}}，</text> -->
						<text v-if="detail.occupyCurrentRule.price">{{detail.occupyCurrentRule.price | regFenToYuan}}元/分钟</text>
						<text v-else>不收费</text>
					</text>
					<!-- <template v-else>
						<text class="item" v-for="(item,index) in detail.occupyCostModel.occupyPhraseRules">
							<text>{{changeHourMinutestr(item.stime)}}~{{changeHourMinutestr(item.etime)}}，</text>
							<text v-if="item.price">{{item.price | regFenToYuan}}元/分钟；</text>
							<text v-else>不收费；</text>
						</text>
					</template> -->
					
				</view>
				<view class="foot flex-row-between">
					<view class="foot-title">当前收费时段</view>
					<view class="foot-desc" v-if="detail.occupyCurrentRule">{{changeHourMinutestr(detail.occupyCurrentRule.stime)}}-{{changeHourMinutestr(detail.occupyCurrentRule.etime)}}</view>
				</view>
			</template>
		</view>
	</view>
</template>
<script lang="ts">
	export default {
		components: {},
		data() {
			return {
				show: false
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			detail: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		mounted() {},
		/**
		 * 组件的方法列表
		 */
		methods: {
			handleRegFenToYuan(fen){
				try{
					var num = fen;
					num=fen*0.01;
					num+='';
					var reg = num.indexOf('.') >-1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g;
					num=num.replace(reg,'$1');
					num = (+num).toFixed(2)
					if(num == '0.00'){
						return '不收费'
					}
					return num
				}catch(e){
					return '--'
				}
			},
			changeHourMinutestr(str) {
				try{
					if (str !== "0" && str !== "" && str !== null) {
						return ((Math.floor(str / 60)).toString().length < 2 ? "0" + (Math.floor(str / 60)).toString() :
							(Math.floor(str / 60)).toString()) + ":" + ((str % 60).toString().length < 2 ? "0" + (str % 60)
							.toString() : (str % 60).toString());
					} else {
						return "";
					}
				}catch(e){
					return '-'
				}
				
			},
			showPopup() {
				this.show = true
			},
			close() {
				this.show = false
			}
		},
		created: function() {}
	}
</script>
<style lang="less" scoped>
	@import '@/commin/flex.less';
	@import '@/commin/commin.less';

	// 占位费
	.placeholdExpense {
		// width: 638rpx;
		box-sizing: border-box;
		background: linear-gradient(0deg, #fff, #f4f6f8);
		border: 2rpx solid #fff;
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		// margin: 16rpx 24rpx 0rpx 24rpx;
		padding: 40rpx 32rpx 37rpx 32rpx;
		line-height: 48rpx;
		line-height: 1;

		.head {
			.arrows {
				.setArrows(#6DB12E, 16rpx, right);
				margin-left: 10rpx;
			}

			.toDetail {
				color: #6DB12E;
				font-size: 24rpx;
			}

			margin-bottom: 24rpx;
		}

		.desc {
			font-size: 24rpx;
			color: #909399;
			line-height: 29rpx;
			margin-bottom: 24rpx;
		}

		.foot-title {
			font-size: 28rpx;
			color: #18181A;
			line-height: 30rpx;
		}

		.foot-desc {
			font-size: 24rpx;
			color: #909399;
			line-height: 24rpx;
		}
	}

	.explainPopup {
		padding: 64rpx 32rpx 24rpx;
		position: relative;
		line-height: 1;

		.error {
			.error(40rpx, 4rpx, #606266);
			position: absolute;
			top: 42rpx;
			right: 32rpx;
		}

		.top-g {
			width: 60rpx;
			height: 8rpx;
			background: #DCDFE6;
			opacity: 1;
			position: absolute;
			top: 24rpx;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 5rpx;
		}

		.head {
			.title {
				font-size: 30rpx;
				color: #303133;
				line-height: 30rpx;
				margin-bottom: 30rpx;
			}

			.title-s {
				width: 6rpx;
				height: 26rpx;
				background: #6DB12E;
				opacity: 1;
				border-radius: 3rpx 3rpx 3rpx 3rpx;
				margin-right: 10rpx;
			}

		}

		.desc {
			font-size: 26rpx;
			color: #303133;
			line-height: 31rpx;
			margin-bottom: 40rpx;
		}

		.tip {
			position: absolute;
			left: 0;
			top: 0;
			width: 138rpx;
			height: 34rpx;
			line-height: 34rpx;
			background: #FC724C;
			border-radius: 0rpx 17rpx 17rpx 0rpx;
			opacity: 1;
			font-size: 20rpx;
			color: #F5F7FA;
		}

		.charging-times {
			// height: 219rpx;
			background: #FFF4F1;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding: 28rpx 32rpx;
			box-sizing: border-box;
			position: relative;

			.times-left {
				width: 40%;
				font-size: 26rpx;
				color: #303133;
				line-height: 26rpx;
			}

			.times-right {
				width: 60%;
				font-size: 26rpx;
				color: #606266;
				line-height: 40rpx;
				// overflow-y: scroll;
				// height: 100%;
			}
		}

		.charging-times-list {
			.tip {
				display: none;
			}

			.list-item {
				height: 112rpx;
				background: #F5F7FA;
				padding: 0 30rpx;
				margin-bottom: 16rpx;
				position: relative;
				background:#F5F7FA;

				&.on {
					background:#FFF4F1;
					.tip {
						display: flex;
					}
				}

				.item-left {
					font-size: 26rpx;
					color: #303133;
				}

				.item-right {
					font-size: 26rpx;
					color: #606266;
					line-height: 31rpx;
				}
			}
		}
	}
</style>